<template>
  <div>
    <div class="row-spaceb mg20">
      <p class="fwbold fs-md">· 我的服务订单</p>
    </div>
    <div
      v-if="!isShowDetail"
      class="orderManage"
    >
      <div class="search-wrap">
        <el-form
          :inline="true"
          :model="searchForm"
        >
          <el-form-item label="企业名称">
            <el-input
              v-model="searchForm.companyName"
              clearable
              placeholder="请输入企业名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="search"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                size="small"
                :type="sortType === 1 ? 'primary' : ''"
                @click="handleSort(1)"
              >
                下单时间
                <i
                  v-if="sortType === 1"
                  :class="getSortIcon(1)"
                ></i>
              </el-button>
              <el-button
                size="small"
                :type="sortType === 2 ? 'primary' : ''"
                @click="handleSort(2)"
              >
                付款时间
                <i
                  v-if="sortType === 2"
                  :class="getSortIcon(2)"
                ></i>
              </el-button>
              <el-button
                size="small"
                :type="sortType === 3 ? 'primary' : ''"
                @click="handleSort(3)"
              >
                签章时间
                <i
                  v-if="sortType === 3"
                  :class="getSortIcon(3)"
                ></i>
              </el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button
              v-loading="loading"
              type="primary"
              size="small"
              @click="exportToExcel"
            >导出Excel</el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="importCompletedOrder"
            >导入已完成订单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="order-list">
        <el-tabs
          type="border-card"
          v-model="activeIndex"
          style="flex: 1;"
          @tab-click="queryOrder"
        >
          <el-tab-pane
            v-for="(value, index) in tablist"
            :key="index"
            :label="value.dictLabel"
            :name="value.dictValue"
          >
            <el-table
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              ></el-table-column>
              <el-table-column
                label="订单编号"
                prop="orderId"
              ></el-table-column>
              <el-table-column
                label="服务产品名称"
                prop="productName"
              ></el-table-column>
              <el-table-column
                label="申请服务企业"
                prop="companyName"
              ></el-table-column>
              <el-table-column
                label="下单时间"
                prop="orderTime"
                width="200"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ formatDate(row.orderTime) }}
                </template>
              </el-table-column>
              <el-table-column
                label="合同生效时间"
                prop="contractTime"
                width="200"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ formatDate(row.contractTime) }}
                </template>
              </el-table-column>
              <el-table-column
                label="合同金额(元)"
                prop="price"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ row.orderType === 2 ? $priceToThousands(row.totalPrice) :
                        row.price ? $priceToThousands(row.price) :
                        $priceFormat(row?.estimatedPrice?.limitOriginalPrice, row?.estimatedPrice?.upperOriginalPrice) }}
                </template>
              </el-table-column>
              <el-table-column
                label="补贴金额(元)"
                prop="discountPrice"
              >
                <template slot-scope="{ row }">
                  {{ row.discountPrice ? $priceToThousands(row.discountPrice): $priceFormat(row?.estimatedPrice?.limitDiscountPrice,row?.estimatedPrice?.upperDiscountPrice) }}
                </template>
              </el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <p
                    v-if="scope.row.status === 0"
                    class="color-red"
                  >待接单</p>
                  <p
                    v-else-if="scope.row.status === 1"
                    class="color-yellow"
                  >待签合同</p>
                  <p
                    v-else-if="scope.row.status === 2"
                    class="color-yellow"
                  >待支付</p>
                  <p
                    v-else-if="scope.row.status === 3"
                    class="color-red"
                  >待服务</p>
                  <p
                    v-else-if="scope.row.status === 4"
                    class="color-red"
                  >待完成</p>
                  <p
                    v-else-if="scope.row.status === 5"
                    class="color-green"
                  >待评价</p>
                  <p
                    v-else-if="scope.row.status === 6"
                    class="color-red"
                  >订单取消</p>
                  <p
                    v-else-if="scope.row.status === 7"
                    class="color-green"
                  >评价完成</p>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="180"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.orderType === 2 && scope.row.status !== 6"
                    type="text"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                  <el-button
                    v-if="scope.row.status === 0 || scope.row.status === 1"
                    type="text"
                    @click="goToDetail(scope.row)"
                  >处理</el-button>
                  <el-button
                    v-if="scope.row.status === 2 || scope.row.status === 5 || scope.row.status === 6 || scope.row.status === 7"
                    type="text"
                    @click="goToDetail(scope.row)"
                  >查看</el-button>
                  <el-button
                    v-if="scope.row.contractAuditStatus === 0"
                    type="text"
                    @click="goToFile(scope.row)"
                  >上传风控说明</el-button>
                  <el-button
                    v-if="scope.row.status === 3"
                    type="text"
                    class="ml10"
                    @click="goToDetail(scope.row)"
                  >开始服务</el-button>
                  <el-button
                    v-if="scope.row.status === 4"
                    type="text"
                    class="ml10"
                    @click="goToDetail(scope.row)"
                  >完成服务</el-button>
                  <el-button
                    v-if="scope.row.status === 5"
                    type="text"
                    class="ml10"
                    @click="gotoCouponExchangeTip(scope.row)(scope.row)"
                  >申请兑付</el-button>
                  <el-button
                    v-if="scope.row.status === 7 && (scope.row.subsidyStatus === 0 || scope.row.subsidyStatus === 4)"
                    type="text"
                    class="ml10"
                    @click="gotoCouponExchange(scope.row)"
                  >申请兑付</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="row-end mt20 mb20">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[12, 20, 32, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div
      v-else
      class="orderDetail"
    >
      <ProductOrderDetail
        @back="goBack"
        :orderStep="selectedOrderStatus"
        :orderId="selectedOrderId"
      ></ProductOrderDetail>
    </div>
    <el-dialog
      title="导入已完成订单"
      :visible.sync="importDialogVisible"
      width="50%"
    >
      <el-form
        :model="importForm"
        label-width="120px"
        :rules="importRules"
        ref="importForm"
      >
        <el-form-item
          label="服务商"
          prop="serviceOrg"
        >
          <el-input
            v-model="importForm.serviceOrg"
            disabled
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="服务产品"
          prop="productId"
        >
          <el-select
            v-model="importForm.productId"
            placeholder="请选择服务产品"
            style="width: 80%"
            @change="handleProductChange"
          >
            <el-option
              v-for="item in productOptions"
              :key="item.productId"
              :label="item.productName"
              :value="item.productId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="服务企业"
          prop="companyId"
        >
          <el-select
            v-model="importForm.companyId"
            placeholder="请选择服务的企业"
            style="width: 80%"
          >
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            >
            </el-option>
          </el-select>
          <div
            class="el-upload__tip"
            v-if="!companyOptions.length"
          >
            <i class="el-icon-warning" /> 找不到服务企业？请提醒该企业入驻服务平台并申领该类产品专项券配额
          </div>
        </el-form-item>
        <el-form-item
          label="服务金额"
          prop="contractPrice"
        >
          <el-input
            v-model="importForm.contractPrice"
            placeholder="请输入实际合同金额"
            style="width: 80%"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="合同签订日期"
          prop="contractDate"
        >
          <el-date-picker
            v-model="importForm.contractDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择合同签订日期"
            style="width: 80%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="服务合同"
          prop="contractFileId"
          required
        >
          <upload-file @setFileUrl="uploadContractFile($event)"></upload-file>
          <div
            v-if="importForm.contractFileName"
            class="uploaded-file"
          >
            <i class="el-icon-document"></i>
            <span>{{ importForm.contractFileName }}</span>
          </div>
          <div class="el-upload__tip"><i class="el-icon-warning" /> 请上传对应的服务合同，请确保合同的真实性，服务金额需要与合同金额保持一致</div>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="importDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleImportSubmit"
        >确定提交</el-button>
      </span>
    </el-dialog>
     <el-dialog
    title="上传风控说明"
    :visible.sync="uploadFileDialogVisible"
    width="500px"
    @close="handleUploadDialogClose"
  >
    <el-form ref="uploadForm" :model="uploadForm" label-width="100px">
      <el-form-item label="风控说明文件">
        <upload-file 
          :limit="1"
          :accept="'.doc,.docx,.pdf,.jpg,.jpeg,.png'"
          @setFileUrl="handleRiskControlFileUpload"
          @removeFile="handleRemoveFile"
        >
          <div slot="tip" class="el-upload__tip">
            请上传风控说明文件，支持格式：doc, docx, pdf, jpg, png，最多上传1个文件
          </div>
        </upload-file>
        
        <div v-if="uploadedRiskControlFile" class="uploaded-file-info">
          <i class="el-icon-document"></i>
          <span>{{ uploadedRiskControlFile.fileName }}</span>
          <el-button type="text" @click="deleteUploadedFile">删除</el-button>
        </div>
      </el-form-item>
    </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="uploadFileDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitRiskControlFile">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>
<script>
import ProductOrderDetail from "./productOrderDetail.vue";
import {
  getOrderList,
  startService,
  finishService,
  importableCompany,
  importableProduct,
  importOrder,
  cancelOrder,
  checkImportOrder,
  exportOrder,
  updateRiskControlFile
} from "@/api/homeApi";
import moment from "moment";
import { mapGetters } from "vuex";
import uploadFile from "@/components/upload/uploadFile";
export default {
  data() {
    return {
      // 1-待接单 2-待签合同 3-待支付 4-待服务 5-待评价/待完成 6-已完成
      activeIndex: "all",
      searchForm: {
        companyName: "",
      },
      tableData: [],
      isShowDetail: false,
      tablist: [
        { dictLabel: "全部", dictValue: "all" },
        { dictLabel: "待接单", dictValue: "0" },
        { dictLabel: "待签合同", dictValue: "1" },
        { dictLabel: "待支付", dictValue: "2" },
        { dictLabel: "待服务", dictValue: "3" },
        { dictLabel: "待完成", dictValue: "4" },
        { dictLabel: "已完成", dictValue: "5" },
        { dictLabel: "订单取消", dictValue: "6" },
        { dictLabel: "评价完成", dictValue: "7" },
      ],
      selectedOrderStatus: "",
      selectedOrderId: "",
      importDialogVisible: false,
      importForm: {
        serviceOrg: "",
        productId: "",
        companyId: "",
        contractPrice: "",
        contractFileId: "",
        contractFileName: "",
        contractDate: "",
      },
      productOptions: [],
      companyOptions: [],
      importRules: {
        productId: [
          { required: true, message: "请选择服务产品", trigger: "change" },
        ],
        companyId: [
          { required: true, message: "请选择服务企业", trigger: "change" },
        ],
        contractPrice: [
          { required: true, message: "请输入服务金额", trigger: "blur" },
        ],
        contractFileId: [
          { required: true, message: "请上传服务合同", trigger: "change" },
        ],
        contractDate: [
          { required: true, message: "请选择合同签订日期", trigger: "change" },
        ],
      },
      currentPage: 1,
      pageSize: 20,
      total: 10,
      status: null,
      sortType: 1,
      sortOrder: true,
      sortClickCount: 0,
      previousSortType: null,
      loading: false,
      selectedRows: [],
       uploadFileDialogVisible: false,
      uploadForm: {
        riskControlFileId: '',
        riskControlFileName: ''
      },
      uploadedRiskControlFile: null,
      currentRowForUpload: null
    };
  },
  components: {
    uploadFile,
    ProductOrderDetail,
  },
  computed: {
    ...mapGetters(["userInfo", "commonDict"]),
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    handleDelete(row) {
      //
      this.$confirm("确认删除订单吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了"确定"按钮，你可以处理删除
          cancelOrder({ orderId: row.orderId }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getOrderList();
            }
          });
        })
        .catch(() => {
          // 用户点击了"取消"按钮，你可以在这里处理取消操作
        });
    },
    importCompletedOrder() {
      importableProduct({
        pageNo: 1,
        pageNum: 100,
      }).then((res) => {
        if (!res.rows?.length) {
          this.$message({
            type: "warning",
            message: "请先上架自己的专项券服务产品",
          });
          return;
        }
        // Reset form data
        this.importForm = {
          serviceOrg: "",
          productId: "",
          companyId: "",
          contractPrice: "",
          contractFileId: "",
          contractFileName: "",
          contractDate: "",
        };
        // Reset validation
        if (this.$refs.importForm) {
          this.$refs.importForm.resetFields();
        }
        this.importDialogVisible = true;
        this.importForm.serviceOrg = this.userInfo.companyName;
        this.productOptions = res.rows;
      });
    },
    uploadContractFile({ fileId, fileName }) {
      this.importForm.contractFileId = fileId;
      this.importForm.contractFileName = fileName;
    },
    handleImportSubmit() {
      this.$refs.importForm.validate((valid) => {
        if (valid) {
          const params = {
            contractDate: this.importForm.contractDate,
            productId: this.importForm.productId,
            companyId: this.importForm.companyId,
            contractPrice: Number(this.importForm.contractPrice) * 100,
            contractFileId: this.importForm.contractFileId,
          };
          // First check if import is possible
          checkImportOrder(params).then((res) => {
            if (res.code === 200) {
              if (res.data?.discountPrice === 0) {
                // Show confirmation dialog if no discount available
                this.$confirm(
                  "服务的企业暂无可抵扣的服务券，可能导致无法兑付成功，请联系企业注册领券再导入服务订单",
                  "提示",
                  {
                    confirmButtonText: "我已知晓，继续提交",
                    cancelButtonText: "暂不提交",
                    type: "warning",
                  }
                )
                  .then(() => {
                    // User wants to proceed anyway
                    this.submitImportOrder(params);
                  })
                  .catch(() => {
                    // User chose to cancel
                    return;
                  });
              } else {
                // Has discount amount, proceed with import
                this.submitImportOrder(params);
              }
            }
          });
        }
      });
    },
    // Helper method to handle the actual import
    submitImportOrder(params) {
      importOrder(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "导入订单成功",
            });
            this.importDialogVisible = false;
            this.getOrderList();
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "导入订单失败",
          });
        });
    },
    formatDate(date) {
      return date ? moment(date).format("YYYY-MM-DD HH:mm:ss") : "-";
    },
    handleSelect() {
      console.log("this.activeIndex", this.activeIndex);
    },
    goToDetail(row) {
      this.selectedOrderStatus = row.status;
      this.selectedOrderId = row.orderId;
      this.isShowDetail = true;
    },
    goToFile(row) {
      this.currentRowForUpload = row;
      // 获取当前已上传的风控文件信息（如果有）
      if (row.riskControlFileId) {
        this.uploadedRiskControlFile = {
          fileId: row.riskControlFileId,
          fileName: row.riskControlFileName
        };
      }
      this.uploadFileDialogVisible = true;
    },
    
    handleRiskControlFileUpload(fileInfo) {
      // 处理上传的文件信息
      this.uploadedRiskControlFile = {
        fileId: fileInfo.fileId,
        fileName: fileInfo.fileName
      };
      this.uploadForm.riskControlFileId = fileInfo.fileId;
      this.uploadForm.riskControlFileName = fileInfo.fileName;
    },
    
    handleRemoveFile() {
      // 处理文件移除
      this.uploadedRiskControlFile = null;
      this.uploadForm.riskControlFileId = '';
      this.uploadForm.riskControlFileName = '';
    },
    
    deleteUploadedFile() {
      // 删除已上传的文件
      this.handleRemoveFile();
    },
    
    handleUploadDialogClose() {
      // 关闭弹窗时重置表单
      this.$refs.uploadForm?.resetFields();
      this.uploadedRiskControlFile = null;
      this.currentRowForUpload = null;
    },
    
    submitRiskControlFile() {
      // 提交风控文件逻辑
      if (!this.uploadForm.riskControlFileId) {
        this.$message.warning('请先上传风控说明文件');
        return;
      }
      updateRiskControlFile({
        orderId: this.currentRowForUpload.orderId,
        fileId: this.uploadForm.riskControlFileId
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('上传成功');
          this.uploadFileDialogVisible = false;
          this.getOrderList(); // 刷新列表
        }
      });
    },
    gotoCouponExchangeTip() {
      // 给出confirm提示：请提醒企业完成服务产品评价，才可进行兑付申请
      this.$confirm("请提醒企业完成服务产品评价，才可进行兑付申请", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了"确定"按钮，你可以在这里处理兑付申请
        })
        .catch(() => {
          // 用户点击了"取消"按钮，你可以在这里处理取消操作
        });
    },
    gotoCouponExchange() {
      this.$router.push({ name: "服务券兑付" });
    },
    goBack() {
      this.isShowDetail = false;
      this.getOrderList();
    },
    search() {
      this.status = this.activeIndex === "all" ? "" : this.activeIndex;
      this.currentPage = 1;
      getOrderList({
        pageNo: this.currentPage,
        pageNum: this.pageSize,
        type: 1,
        status: this.status,
        companyName: this.searchForm.companyName,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getOrderList(this.status);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getOrderList(this.status);
    },
    queryOrder(val) {
      if (val.name === "all") {
        this.getOrderList("");
        this.status = "";
      } else {
        this.getOrderList(val.name);
        this.status = val.name;
      }
    },
    getOrderList(status = "") {
      getOrderList({
        pageNo: this.currentPage,
        pageNum: this.pageSize,
        type: 1,
        status,
        orderBy: this.sortType,
        isAsc: this.sortOrder,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    // 开始服务
    beginService(row) {
      this.$confirm("请确定开始服务", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          startService({ orderId: row.orderId }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "开始服务成功!",
              });
              this.getOrderList("");
            }
          });
          // 用户点击了"确定"按钮，你可以在这里处理兑付申请
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消开始服务",
          });
          // 用户点击了"取消"按钮，你可以在这里处理取消操作
        });
    },
    // 完成服务
    completeService(row) {
      this.$confirm("确定完成服务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          finishService({ orderId: row.orderId }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "完成服务成功!",
              });
              this.getOrderList("");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消完成服务",
          });
        });
    },
    handleProductChange(productId) {
      // Clear previous company selection
      this.importForm.companyId = "";
      this.companyOptions = [];
      // Fetch companies based on selected product
      importableCompany({
        productId: productId,
        pageNo: 1,
        pageNum: 999,
      }).then((res) => {
        if (res.code === 200 && res.rows) {
          if (!res.rows.length) {
            this.$message({
              type: "warning",
              message: "请提醒企业入驻服务平台并申领专项券",
            });
          }
          this.companyOptions = res.rows;
        }
      });
    },
    handleSort(type) {
      if (this.previousSortType !== type) {
        this.sortClickCount = 0;
      }
      this.sortClickCount++;

      if (this.sortClickCount === 1) {
        // 第一次点击:降序
        this.sortType = type;
        this.sortOrder = false;
      } else if (this.sortClickCount === 2) {
        // 第二次点击:升序
        this.sortOrder = true;
      } else {
        // 第三次点击:重置排序
        this.sortType = type;
        this.sortOrder = false;
        this.sortClickCount = 0;
      }

      this.previousSortType = type;
      this.currentPage = 1;
      this.getOrderList(this.status);
    },
    getSortIcon(type) {
      if (this.sortType !== type) return "";
      return this.sortOrder ? "el-icon-caret-bottom" : "el-icon-caret-top";
    },
    exportToExcel() {
      this.loading = true;
      const fileName = `订单列表_${moment().format("YYYY-MM-DD")}.xlsx`;

      // 构建导出参数
      const exportParams = {
        type: 1,
        status: this.status,
        companyName: this.searchForm.companyName,
        orderBy: this.sortType,
        isAsc: this.sortOrder,
      };

      // 如果有选中行，则只导出选中的订单
      if (this.selectedRows.length > 0) {
        const orderIds = this.selectedRows.map((row) => row.orderId).join(",");
        exportParams.orderIds = orderIds;
      }

      exportOrder(exportParams, fileName)
        .then((res) => {
          this.$message({
            type: "success",
            message: "导出成功",
          });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "导出失败",
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}

:deep .el-divider--horizontal {
  margin: 12px 0;
}

:deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: #d32521;
}

:deep .el-table thead {
  color: #000;
}

.orderManage {
  height: 100%;

  ::v-deep .el-tabs__item {
    min-width: 120px;
    text-align: center;
  }

  .search-wrap {
    margin: 0 30px;
  }

  .order-list {
    padding: 10px 30px 30px;
    height: calc(100% - 62px);
  }
}

.uploaded-file {
  margin-top: 10px;
  color: #606266;

  .el-icon-document {
    margin-right: 5px;
  }
}
.uploaded-file-info {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.uploaded-file-info .el-icon-document {
  margin-right: 8px;
  color: #409eff;
}

.uploaded-file-info span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
